<template>
  <div class="name">
    <div class="NameTop">
      <full></full>
      <div class="top" @click="btnLuckPeople">中奖下载</div>
      <div class="top" @click="btnLuck">抽奖名单</div>
      <div class="top" @click="btnLogin">登录入口</div>
      <div class="top" @click="btnCheckEorrData">异常数据检查</div>
      <div class="top" @click="clearSessionData">清除缓存数据</div>
    </div>

    <!-- <div class="top"></div> -->
    <div class="LuckContainer">
      <div
        class="container"
        :class="{ activeCheck: Number(item.id) === activeIndex, selectBg: checkArray.includes(item.id) }"
        v-for="item in peopleList"
        :key="item.id"
      >
        <div class="Id">{{ item.id }}</div>
        <div class="Pname">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Datapeople from './people'
var localData = localStorage.getItem('FirstPeo')
if (localData) {
  localStorage.setItem('FirstPeo', JSON.stringify(Datapeople.peoples))
} else {
  localStorage.setItem('FirstPeo', JSON.stringify(Datapeople.peoples))
}
// 需要随时跟换名单吗
import full from './full.vue'
import { verificationRepeat, verificationIsRepeat, verificationIsRepeatNumber, verificationIsRepeatPerson } from '../public/public.js'
export default {
  components: { full },
  props: {
    startC: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      checkArray: [],
      selectArr: [],
      activeIndex: null,
      timer: null,
      inter: null,
      stopTime: null,
      propsData: null,
      peopleList: localStorage.getItem('FirstPeo') ? JSON.parse(localStorage.getItem('FirstPeo')) : Datapeople.peoples
    }
  },
  methods: {
    btnLuckPeople() {
      const PeopleData = JSON.parse(localStorage.getItem('FirstDate'))
      let LuckData = []
      console.log(PeopleData)
      PeopleData.map(item => {
        // console.log(item)
        item.list.map(it => {
          LuckData.push([it.name, it.winPrize.join(',')])
        })
      })
      console.log(LuckData)
      import('@/vendor/Export2Excel').then(excel => {
        console.log(excel)
        excel.export_json_to_excel({
          header: ['奖品名称', '中奖姓名'], // 表头 必填
          data: LuckData,
          filename: 'Luck-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    btnLuck() {
      this.$router.push('/people')
    },
    btnLogin() {
      this.$router.push('/login')
    },
    startLuckDraw(item) {
      this.propsData = item
      console.log(item.size)
      this.checkArray = []
      this.selectArr = []
      let a = 1
      if (!this.inter) {
        this.inter = setInterval(() => {
          this.seteInterVal(a++)
        }, 200)
      }
      setTimeout(() => {
        window.clearInterval(this.inter)
        this.inter = null
        setTimeout(() => {
          if (this.selectArr.length < item.size) {
            const indexData = this.peopleList.filter(it => {
              return it.id === this.activeIndex
            })
            if (item.size - this.selectArr.length === 1) {
              this.selectArr.push(indexData)
              this.checkArray.push(this.activeIndex)
            } else {
              // 多个数据 怎么处理
              const num = item.size - this.selectArr.length
              for (var i = 0; i < num; i++) {
                const PeoId = this.peopleList.filter(item => {
                  return !this.checkArray.includes(item.id)
                })
                const LuckNum = Math.floor(Math.random() * PeoId.length) // 一个数据对吗
                this.selectArr.push(PeoId[LuckNum])
                this.checkArray.push(PeoId[LuckNum].id)
              }
            }
            this.$emit('newLuckPeople', this.selectArr)
          } else {
            this.$emit('newLuckPeople', this.selectArr)
          }
        }, 1000)
      }, 1000 * item.size * 3)
    },
    changeTAg(tag) {
      const clearTag = this.selectArr.filter((item, index) => {
        if (item.name === tag) {
          this.selectArr.splice(index, 1)
        }
        return item.name === tag
      })

      const Id = clearTag[0].id
      this.checkArray.splice(this.checkArray.indexOf(Id), 1)
      console.log(this.checkArray.indexOf(Id), this.selectArr)
      if (this.activeIndex === Id) {
        this.activeIndex = null
      }
    },
    clearPeople() {
      const newPeople = this.peopleList.filter(item => {
        return !this.checkArray.includes(item.id)
      })
      localStorage.setItem('FirstPeo', JSON.stringify(newPeople))
      this.peopleList = JSON.parse(localStorage.getItem('FirstPeo'))
      // 如何更新数据
      this.activeIndex = null
      this.selectArr = []
      this.checkArray = []
    },
    seteInterVal(a) {
      const PeoId = this.peopleList.filter(item => {
        return !this.checkArray.includes(item.id)
      })
      const LuckNum = Math.floor(Math.random() * PeoId.length) // 一个数据对吗
      this.activeIndex = PeoId[LuckNum].id //this.peopleList[LuckNum].id
      if (a % 15 === 0) {
        console.log('啊啊', a)
        this.selectArr.push(PeoId[LuckNum])
        this.checkArray.push(this.activeIndex)
        console.log(this.checkArray)
      }
    },
    RunLuck() {},
    //异常数据检查，分为三部分组成
    //1.是否包含重复中奖人员
    //2.中奖人数和奖品数是否匹配
    //3.每一个奖项和人数是否相等
    btnCheckEorrData() {
      let res = localStorage.getItem('FirstDate') ? JSON.parse(localStorage.getItem('FirstDate')) : ''
      if (res) {
        let personList = []
        let p_number = 0
        res.map((v, i) => {
          if (v.list) {
            v.list.map((v1, i1) => {
              if (v1.winPrize && v1.winPrize.length > 0) {
                personList.push(v1.winPrize)
                p_number += v1.size
              }
            })
          }
        })

        let repeatPerson = verificationIsRepeat([...personList])
        //异常检查不通过，包含重复中奖人员
        if (repeatPerson) {
          this.$message.error(repeatPerson)
          return
        }

        //检查人数和中奖数是否相等
        let numberIsEqual = verificationIsRepeatPerson(p_number, personList)
        if (numberIsEqual) {
          this.$message.error(numberIsEqual)
        }
      }

      this.$message.success(`中奖数据无误！`)
    },
    clearSessionData(){
      localStorage.removeItem('fullScreen')
      localStorage.removeItem('showFlag')
      localStorage.removeItem('FirstPeo')
      localStorage.removeItem('FirstDate')
      localStorage.removeItem('firstPrize')
      this.$router.push('/')
    }
  }
}
</script>
<style scoped lang="scss">
.name {
  // padding: 20px;
  .NameTop {
    display: flex;
    justify-content: flex-end;
  }
  .top {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
    margin-top: 20px;
    height: 30px;
    line-height: 30px;
    color: #efc799;
    border: 2px solid #efc799;
    cursor: pointer;
    caret-color: transparent;
    padding: 0 15px;
  }
  .LuckContainer {
    border: 1px solid #fcc244;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 95px;
    margin-left: 10px;
    margin-right: 20px;
    overflow: auto;
    height: calc(100vh - 176px);
    align-content: flex-start;
    .container {
      background-image: url('@/assets/xingming-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 75px;
      width: 63px;
      margin-left: 10px;
      margin-top: 7px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
    .activeCheck {
      background-image: url('@/assets/bingo-bg.png');
    }
    .selectBg {
      background-image: url('@/assets/bingo-bg.png');
    }
  }

  .LuckContainer::-webkit-scrollbar {
    display: none;
  }
}
</style>
